<template>
  <div style="height: 100%">
    <div style="height: 10%">
      <el-button
        style="float: left; font-size: 10px"
        type="primary"
        @click="openProjectInput()"
        >新增项目</el-button
      >
    </div>
    <div style="overflow-y: scroll; overflow-x: hidden; height: 95%">
      <el-row :gutter="20">
        <el-col
          :span="5"
          v-for="(test, index) in listProject"
          :key="index"
          :offset="1"
        >
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <el-button
                style="margin-right: 10px"
                type="text"
                @click="select_project_id(test.id)"
                ><i style="margin-left: 10px" class="el-icon-edit"></i
              ></el-button>
              <span
                ><b>{{ test.project_name }}</b></span
              >
              <el-button
                style="float: right; margin-right: 10px"
                type="text"
                @click="urlpath('/serviceName', test.id)"
                >服务配置</el-button
              >
            </div>
            <div class="text item">
              <span class="aa">编码：</span><span>{{ test.project_code }}</span
              ><br />
              <span class="aa">负责人：</span
              ><span>{{ test.project_manager }}</span
              ><br />
              <span class="aa">说明：</span><span>{{ test.desc }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 新增 -->
      <el-dialog title="创建项目" :visible.sync="dialogFormVisible">
        <el-form :model="formData">
          <el-form-item label="项目名称:">
            <el-input
              v-model="formData.project_name"
              placeholder="请输出项目名称，如:测试平台"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目编码:">
            <el-input
              v-model="formData.project_code"
              placeholder="请输入项目编码,如：TSPT"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目负责人:">
            <el-input
              v-model="formData.project_manager"
              placeholder="请输入负责人，如:林某某"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目描述:">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formData.desc"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addProject()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 更新 -->
      <el-dialog title="修改项目信息" :visible.sync="dialogFormVisibleUPDATE">
        <el-form :model="formData">
          <el-form-item label="项目名称:">
            <el-input v-model="formData.project_name"></el-input>
          </el-form-item>
          <el-form-item label="项目编码:">
            <el-input v-model="formData.project_code"></el-input>
          </el-form-item>
          <el-form-item label="项目负责人:">
            <el-input v-model="formData.project_manager"></el-input>
          </el-form-item>
          <el-form-item label="项目描述:">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="formData.desc"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleUPDATE = false">取 消</el-button>
          <el-button type="primary" @click="update_project()">更 新</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import apps from "@/api/interface";
import project from "@/api/project";
export default {
  data() {
    return {
      dialogFormVisibleUPDATE: false,
      dialogFormVisible: false,

      formData: {
        id: "",
        project_name: "",
        project_code: "",
        project_manager: "",
        desc: "",
        updateService: undefined,
      },
      formLabelWidth: "120px",
      list: [],
      listService: [],
      listServiceVersion: [],
      listProject: [],
      rules: {},
      project: {},
    };
  },

  mounted() {
    this.select_project();
  },

  methods: {
    openProjectInput() {
      this.formData = {};
      this.dialogFormVisible = true;
    },

    urlpath(path, id) {
      apps.testHtml(path, id);
    },

    // 增加服务
    addProject() {
      this.$axios.put("/addProject/", this.formData).then((res) => {
        if (res.data.code === 1) {
          this.dialogFormVisible = false;
          this.select_project();
        }
      });
    },

    //查询项目
    select_project() {
      this.$axios.get("/selectProject/").then((res) => {
        this.listProject = res.data;
      });
    },
    // 修改项目
    update_project() {
      this.$axios
        .put("/updateProject/", {
          project_name: this.formData.project_name,
          project_code: this.formData.project_code,
          project_manager: this.formData.project_manager,
          desc: this.formData.desc,
          project_id: this.formData.id,
        })
        .then((res) => {
          if (res.data["success"] === "true") {
            this.dialogFormVisibleUPDATE = false;
            this.select_project();
          }
        });
    },
    //查询项目
    select_project_id(project_id) {
      this.dialogFormVisibleUPDATE = true;
      this.$axios
        .get("/select_project_id/", { params: { project_id: project_id } })
        .then((res) => {
          this.formData = res.data[0];
        });
    },
  },
};
</script>
<style>
.el-collapse-item__header {
  color: #a0d052;
}
.el-input {
  width: 300px;
}
.el-dialog {
  width: 500px;
  border-radius: 15px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 38px;
}

.el-card__header {
  padding: 0;
}

.box-card {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
  height: 180px;
}
.aa {
  width: 60px;
  text-align: right;
  display: inline-block;
}
</style>